<!--
 * @Description:
 * @Autor: huHaiBo
 * @Date: 2022-08-08 14:06:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-04-22 11:22:08
-->
<template>
  <!-- 渲染word文件 -->
  <div
    id="wordView"
    v-loading="loading"
    class="docxClass"
    element-loading-text="加载中"
    v-html="vHtml"
  />

</template>
<script>
import mammoth from 'mammoth'
export default {
  name: 'Word',
  props: {
    docxurl: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      loading: true, // 用于elementui 加载插件
      vHtml: '',
      tipStr: null
      // wordURL: 'http://49.7.66.47:9002/tis/plantmgtservice/设备管理系统设计文档【功能涵盖迭代优化】 20220425.docx' // 此地方存放文件的地址
    }
  },
  watch: {
    docxurl: {
      immediate: true,
      handler(val) {
        if (val) {
          this.previewWord(val)
        }
      }
    }
  },
  created() {
    // this.previewWord(this.docxurl)
  },
  mounted() {
    console.log(this.docxurl, 'this.wordURL------')
  },
  methods: {
  // 渲染 word 文件内容
    previewWord(url) {
      var vm = this
      this.loading = true
      const xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      xhr.responseType = 'arraybuffer'
      xhr.onload = function() {
        if (xhr.status === 200) {
          console.log('🚀 ~ previewWord ~ mammoth:', mammoth, xhr.response.byteLength)
          if (xhr.response.byteLength > 0) {
            vm.tipStr = null
            mammoth
              .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
              .then((resultObject) => {
                console.log('🚀 ~ .then ~ resultObject:111', resultObject)
                vm.$nextTick(() => {
                  vm.vHtml = resultObject.value
                })
              })
          } else {
            vm.$message.error('该文档内容为空！')
          }
        }
      }
      this.loading = false
      xhr.send()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.docxClass {
  img {
    width: 100%  !important;
  }
}
.tipBox {
  width: 100%;
  height: 500px;
  background-color: red;
}
</style>

